<template>
  <div>
    <!--这是登录页面-->
    <div class="bg-box">
      <div class="filterImg">
        <img src="../../assets/images/login/10.jpg">
      </div>
      <!--    登录边框      -->
      <div class="loginBox">
        <h1>猎鹄科技</h1>
        <div class="InputBox">
          <div class="denglu">
            <img src="../../assets/images/login/icon_vst4xsp2i1b/denglu-copy.png" >
          </div>

            <img src="../../assets/images/login/icon_vst4xsp2i1b/mima.png" class="mima">

          <input placeholder="请输入用户名" v-model="userName"></input><br/>

          <img :src="imgZy" @click="typePass"  class="imgEyes">

          <input :type="isType" placeholder="密码" v-model="password"></input><br/>
          <button @click="goHome()">登录</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "Login",
  data() {
    return {
      isType: 'password',
      index: 0,
      userName: "",
      imgZy: require('../../assets/images/login/biyan.png'),
      password: '',
    }
  },
  //函数
  methods: {
//登录函数
           goHome() {

             axios.post('http://132.232.110.185/personnelManagement/user/login',{mNo:this.userName,mPassword:this.password}).then(
                 (response) => {
                   if(response.data.code == 101){
                      alert('请输入正确的账号或密码')
                     this.userName='';
                      this.password=''

                   }else{
                     let  tokenCount = 'Bearer '+response.data.msg+''
                     let  pasData= this.userName
                     localStorage.setItem('token', tokenCount)
                     localStorage.setItem('user',pasData)
                     localStorage.setItem('loginDataAll',JSON.stringify(response.data.data))
                     this.$store.dispatch('loginData',response.data.data)

                    //跳主主页
                      this.$router.push('/Home')
                   }
                 },
                 (error) => {
                   console.log(error);
                 }
             )

    },
    //密码显示隐藏
    typePass() {

      if (this.index === 1) {
        this.imgZy = require('../../assets/images/login/biyan.png')
        this.isType = 'password';
        this.index = 0
      } else {
        this.imgZy = require('../../assets/images/login/icon-eye-open.png')
        this.isType = 'text';
        this.index = 1
      }
    },


    //先不用
    changImg() {
      setInterval(() => {
        this.index++
        if (this.index === this.imgArr.length) {
          this.index = 0
        }
      }, 2000)
    }

  },
  //生命周期
  created() {
    if (this.index === 0) {

    }
  }

}
</script>

<style lang="less" scoped>


.bg-box {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
  //背景虚画
  .filterImg img {
    width: 100%;
    height: 100%;
    background-size:cover;
  }

  //登录透名边框
  .loginBox {

    position: absolute;
    width: 650px;
    height: 550px;
    top: 170px;
    left: 550px;
    text-align: center;

    h1 {

      color: #992439;
      font-size: 45px;
    }
  ;

    .InputBox {
      margin-top: 20px;
      position: relative;
      padding: 40px;
      height: 400px;
      .denglu{

        width: 42px;
        height: 42px;
        position: absolute;
        left: 60px;
        top: 102px;
        img{
          width: 100%;
          height: 100%;
        }

      }
      .mima{

        width: 42px;
        height: 42px;
        position: absolute;
        left: 60px;
        top: 234px;
      }
      .imgEyes{
        width: 32px;
        height: 32px;
        position: absolute;
        left: 504px;
        top: 234px;
      }


      input {
        margin-top: 45px;
        border-radius: 6px;
        height: 82px;
        width: 556px;
        background-color: transparent;
        font-size: 22px;
        border: 1px solid rgba(0, 0, 0, 0.2);
        outline: none;
        text-indent: 60px;

      }

      button {
        background-color: #d97b0f;
        margin-top: 45px;
        border-radius: 6px;
        height: 82px;
        width: 556px;
        font-size: 22px;
        border: 1px solid rgba(0, 0, 0, 0.2);

      }

    }
    }


}


</style>


